{% extends 'base_tabler.html' %} {% block navname %}correlation{% endblock %}{% block content %}
<div class="page-header d-print-none">
  <div class="container-xl">
    <div class="row g-2 align-items-center">
      <div class="col">
        <h2 class="page-title">青少年行为相关性分析</h2>
        <div class="text-muted mt-1">探索不同行为类型和特征之间的内在联系</div>
      </div>
    </div>
  </div>
</div>

<!-- 相关性热力图 -->
<div class="row mt-3">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">多维行为相关性热力图</h3>
      </div>
      <div class="card-body">
        <div id="correlation-chart" style="width: 100%; height: 500px">{{ correlation_chart|safe }}</div>
      </div>
    </div>
  </div>
</div>

<!-- 特征重要性与聚类分析 -->
<div class="row mt-3">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">特征重要性分析</h3>
      </div>
      <div class="card-body">
        <div id="feature_importance" style="width: 100%; height: 400px">{{ feature_importance_chart|safe }}</div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">用户行为聚类分析</h3>
      </div>
      <div class="card-body">
        <div id="clustering" style="width: 100%; height: 400px">{{ clustering_chart|safe }}</div>
      </div>
    </div>
  </div>
</div>

<!-- 个性特征与风险行为、年龄与兴趣关系分析 -->
<div class="row mt-3">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">个性特征与风险行为相关性</h3>
      </div>
      <div class="card-body">
        <div id="personality_risk_chart" style="width: 100%; height: 400px">{{ personality_risk_chart|safe }}</div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">年龄与兴趣发展趋势</h3>
      </div>
      <div class="card-body">
        <div id="age_interest_chart" style="width: 100%; height: 400px">{{ age_interest_chart|safe }}</div>
      </div>
    </div>
  </div>
</div>

<!-- 性别差异与朋友数量影响分析 -->
<div class="row mt-3">
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">性别行为差异分析</h3>
      </div>
      <div class="card-body">
        <div id="gender_behavior_chart" style="width: 100%; height: 400px">{{ gender_behavior_chart|safe }}</div>
      </div>
    </div>
  </div>
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">朋友数量与行为相关性</h3>
      </div>
      <div class="card-body">
        <div id="friends_behavior_chart" style="width: 100%; height: 400px">{{ friends_behavior_chart|safe }}</div>
      </div>
    </div>
  </div>
</div>

<div class="row mt-3">
  <!-- 行为关联网络图 -->
  <div class="col-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">多维行为关联网络图</h3>
      </div>
      <div class="card-body">
        <div id="behavior_network" style="width: 100%; height: 500px">{{ behavior_network|safe }}</div>
      </div>
    </div>
  </div>
  <!-- 相关因素对比图 -->
  <div class="col-md-6">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">兴趣与学业表现相关性</h3>
      </div>
      <div class="card-body">
        <div id="interest_academic_chart" style="width: 100%; height: 400px">{{ interest_academic_chart|safe }}</div>
      </div>
    </div>
  </div>
</div>
<div class="row mt-3">
  <div class="col-md-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">社交活跃度与风险行为相关性</h3>
      </div>
      <div class="card-body">
        <div id="social_risk_chart" style="width: 100%; height: 400px">{{ social_risk_chart|safe }}</div>
      </div>
    </div>
  </div>
</div>

<!-- 相关性洞察 -->
<div class="row mt-3">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">相关性分析洞察</h3>
      </div>
      <div class="card-body">
        {% for insight in correlation_insights %}
        <div class="mb-4">
          <h4 class="card-subtitle mb-2 text-primary">{{ insight.title }}</h4>
          <p class="text-muted">{{ insight.content }}</p>
        </div>
        {% endfor %}
      </div>
    </div>
  </div>
</div>

<!-- 聚类分析卡片 -->
<div class="col-12">
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">聚类分析</h3>
      <div class="card-actions">
        <a href="#" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#clusteringInfoModal">
          <i class="ti ti-info-circle"></i> 了解更多
        </a>
      </div>
    </div>
    <div class="card-body">{{ clustering_chart|safe }}</div>
    <div class="card-footer">
      <div class="d-flex">
        <a href="#" class="btn btn-link">导出数据</a>
        <a href="#" class="btn btn-primary ms-auto" data-bs-toggle="modal" data-bs-target="#clusteringModal"
          >了解更多</a
        >
      </div>
    </div>
  </div>
</div>

<!-- 新增：聚类特征分析卡片 -->
<div class="col-lg-6">
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">聚类特征分析</h3>
      <div class="card-actions">
        <a href="#" class="btn btn-primary btn-sm" data-bs-toggle="tooltip" title="显示各聚类在不同特征上的表现">
          <i class="ti ti-info-circle"></i>
        </a>
      </div>
    </div>
    <div class="card-body">{{ clustering_feature_chart|safe }}</div>
    <div class="card-footer">
      <small class="text-muted">聚类特征雷达图展示了每个聚类在不同维度上的特征强度，帮助理解各聚类的独特性。</small>
    </div>
  </div>
</div>

<!-- 新增：聚类轮廓分析卡片 -->
<div class="col-lg-6">
  <div class="card">
    <div class="card-header">
      <h3 class="card-title">聚类数量优化分析</h3>
      <div class="card-actions">
        <a href="#" class="btn btn-primary btn-sm" data-bs-toggle="tooltip" title="轮廓系数分析用于确定最佳聚类数量">
          <i class="ti ti-info-circle"></i>
        </a>
      </div>
    </div>
    <div class="card-body">{{ silhouette_chart|safe }}</div>
    <div class="card-footer">
      <small class="text-muted">轮廓系数越高表示聚类质量越好，峰值点通常是最佳聚类数量。</small>
    </div>
  </div>
</div>

<!-- 聚类分析信息模态框 -->
<div class="modal modal-blur fade" id="clusteringInfoModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">聚类分析详情</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <div class="mb-3">
          <h4>什么是聚类分析？</h4>
          <p>
            聚类分析是一种无监督学习技术，用于将相似的数据点分组到聚类中。在青少年调查数据分析中，聚类可以帮助识别具有相似特征、兴趣和行为的群体。
          </p>
        </div>
        <div class="mb-3">
          <h4>如何解读聚类散点图</h4>
          <p>
            散点图上的每个点代表一位受访者，不同颜色表示不同的聚类。点的位置由其主要特征决定，通过数据处理将多维数据映射到二维平面。靠近的点表示特征相似的受访者。
          </p>
        </div>
        <div class="mb-3">
          <h4>聚类特征分析</h4>
          <p>
            雷达图展示了每个聚类在不同维度上的表现。这有助于了解每个群体的独特特点，例如某个聚类可能在社交活动上表现活跃，而在学习时间上较少。
          </p>
        </div>
        <div class="mb-3">
          <h4>轮廓系数分析</h4>
          <p>
            轮廓系数是衡量聚类质量的指标，值范围在-1到1之间。值越接近1表示聚类效果越好，数据点与自己所在聚类的相似度高，与其他聚类的差异度大。图表中的峰值通常指示最佳的聚类数量。
          </p>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">了解了</button>
      </div>
    </div>
  </div>
</div>

<!-- 聚类分析模态框 -->
<div class="modal modal-blur fade" id="clusteringModal" tabindex="-1" role="dialog" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">聚类分析详情</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <h3>聚类分析方法说明</h3>
        <p>
          聚类分析是一种无监督学习方法，用于将数据点分组到不同的簇中，使得同一簇内的数据点相似度较高，而不同簇之间的数据点相似度较低。
        </p>

        <h4>聚类算法原理</h4>
        <p>本分析使用了基本聚类算法，该算法通过以下步骤工作：</p>
        <ol>
          <li>选择若干个中心点</li>
          <li>将每个数据点分配到最相似的中心点所代表的簇</li>
          <li>重新计算每个簇的中心点</li>
          <li>重复步骤2和3直到聚类结果稳定</li>
        </ol>

        <h4>分析结果解读</h4>
        <p>通过聚类分析，我们发现了学生群体中存在的不同特征组合，这些特征组合可能表示：</p>
        <ul>
          <li>具有相似兴趣爱好的学生群体</li>
          <li>学习方式和学习成绩相关性</li>
          <li>社交活动与心理健康的关联模式</li>
        </ul>

        <h4>应用价值</h4>
        <p>聚类分析结果可应用于：</p>
        <ul>
          <li>个性化教育方案设计</li>
          <li>学生群体精准画像</li>
          <li>有针对性的心理健康干预</li>
          <li>兴趣社团组织与活动规划</li>
        </ul>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">我知道了</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}
